<script setup lang='ts'>
import { ref, onMounted, onUpdated, watchEffect} from 'vue'
import { RouterLink, useRoute, useRouter } from 'vue-router';
import { useRecommendStore } from '../../stores/recommend';
import { useUserStore } from '../../stores/user';
import { getDetailAPI } from '../../apis/novel';
import { postBookcaseAPI } from '../../apis/bookcase'


const book = ref({})
const recommendStore = useRecommendStore()
const recommend = ref()

const getRecommend = async () => {
  recommend.value = await recommendStore.getRecommend(book.value.novel.type)
}

const add = async () => {
  const novel = book.value.novel
  const bookcase = {
    novelId: novel?.id,
    name: novel?.name,
    author: novel?.author,
  }
  if (useUserStore().token) {
    await postBookcaseAPI(bookcase)
    alert("加入成功")
  } else {
    alert('请先登录')
  }
}

const route = useRoute()

const getDetail = async (id) => {
  const res = await getDetailAPI(id)
  book.value = res.data
}

onMounted(async () => {
  await getDetail(route.params.id)
  document.title = '笔趣阁_免费阅读_'+book.value.novel?.name + '_最新章节_' + book.value.novel?.newChapter
  getRecommend()
})

watchEffect(() => {
  getDetail(route.params.id)
})
</script>

<template>

  <div class="">
    <div class="flex w-full mt-3">
      <div class="flex flex-col w-full min-h-full">
        <div class="border-2 border-blue-300">
          <h2
            class="flex items-center w-full h-10 px-2 text-xs text-gray-900 border-b border-gray-300 opacity-70 bg-color-s2"
          >
            笔趣阁 > {{ book.novel?.type }} > {{ book.novel?.name }}免费阅读
          </h2>
          <div class="flex flex-col text-gray-900 text-opacity-70">
            <div class="flex py-2">
              <div class="px-3 pt-1 sm:hidden lg:inline-block sm:px-3">
                <img
                  src="../../assets/img/null.jpg"
                  :alt="book.novel?.name"
                  class="h-auto border-4 border-gray-300 w-44 min-w-32 max-w-32"
                ></div>
              <div class="flex flex-col w-full px-3 text-sm">
                <h1 class="text-lg font-semibold ">{{ book.novel?.name }}</h1>
                <div class="grid grid-cols-2 pt-1 pb-1 border-b border-gray-200 small">
                  <span>作者：{{ book.novel?.author }}</span>
                  <span>状态：{{ book.novel?.status }}</span>
                  <span class="w-full nowrap">更新：{{ book.novel?.updateTime.replace('T', ' ') }}</span>
                  <span class="w-full nowrap ">最新：
                    <RouterLink
                      :to="{ path: '/book/' + book.novel?.id + '/' + book.novel?.newId }"
                      class="text-red-500 border-b border-collapse hover:border-red-500"
                    >
                      {{ book.novel?.newChapter }}
                    </RouterLink>
                  </span>
                </div>
                <div class="flex items-center px-3 space-x-12">
                  <div
                    class="flex items-center justify-center w-1/2 h-10 mx-auto mt-1 text-white transition-all cursor-pointer hover:bg-sky-600 group bg-sky-500 opacity-70 readlink"
                    @click="add"
                  >
                    加入书架
                  </div>
                  <div
                    class="flex items-center justify-center w-1/2 h-10 mx-auto mt-1 text-white transition-all bg-orange-600 hover:bg-orange-500 group opacity-70 readlink"
                  >
                    <router-link
                      :to="{ path: '/book/' + book.novel?.id + '/' + book.list?.[0]?.id }"
                      class="transition-all group-hover:bg-orange-500"
                    >
                      开始阅读
                    </router-link>
                  </div>
                </div>
                <div class="intro">
                  <dl class="flex flex-wrap pt-3 text-sm">
                    <dd>内容简介：{{ book.novel?.simple }}
                    </dd>
                  </dl>
                </div>
              </div>
            </div>

            <div class="flex items-center justify-center px-1 pb-1 text-xs">
              <span class="min-w-14">新书推荐: </span>
              <router-link
                v-for="item in recommend"
                :key="item.id"
                :to="{ path: '/book/' + item.id }"
                class="border-b border-collapse max-w-20 hover:border-b-blue-600 nowrap"
              >
                {{ item.name }}、
              </router-link>
            </div>
          </div>
        </div>
      </div>


    </div>
    <div class="flex w-full mt-3">
      <div class="flex flex-col w-full min-h-full">
        <div class="border-2 border-blue-300">
          <h2
            class="flex items-center justify-center h-10 px-2 mx-1 my-1 text-base bg-blue-200 border-b border-gray-300 text-gray-950 opacity-70"
          >
            {{ book.novel?.name }}最新章节列表
          </h2>
          <div class="listmain">
            <dl class="grid grid-cols-3">
              <dd
                v-for="item in book.list"
                :key="item.id"
                class="px-2 py-0.5 my-1 text-blue-900  w-full  nowrap border-b-2 border-dotted text-opacity-70 hover:text-red-600 "
              >
                <RouterLink
                  :to="{ path: '/book/' + book.novel?.id + '/' + item.id }"
                  class="border-b border-blue-50 hover:border-b-red-600"
                >
                  {{ item.title }}
                </RouterLink>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped lang='scss'>
.nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.min-w-14 {
  min-width: 3.6rem;
}
.max-w-32{
  max-width: 8rem;
}
</style>